<template>
  <view class="app">
    <view class="checked-all-btn"
      ><image class="checkbox1" src="/static/whiteSelected.png"></image
      ><text>批量选择</text></view
    >
    <view class="search-btn" @click="showPopup('searchModal')"
      ><image class="checkbox1" src="/static/shaixuan@2x.png"></image
      ><text>筛选</text></view
    >
    <view class="page-tip">{{ title }}</view>
    <view class="wrapper">
      <view class="page-tab">
        <view
          class="tab"
          :class="{ actived: tabIndex === 0 }"
          @click="tabIndex = 0"
        >
          <view>待接货源</view>
          <view class="tagActived" v-if="tabIndex === 0"></view>
          <view class="border45" v-if="tabIndex === 0"></view>
        </view>
        <view
          class="tab"
          :class="{ actived: tabIndex === 1 }"
          @click="tabIndex = 1"
        >
          <view>已接货源</view>
          <view class="tagActived" v-if="tabIndex === 1"></view>
          <view class="border135" v-if="tabIndex === 1"></view>
        </view>
      </view>

      <view v-if="tabIndex === 0" class="tab-bg">
        <mescroll-uni
          ref="mescrollRef"
          @init="mescrollInit"
          @down="refreshChange"
          @up="loadChange"
          :down="down"
          :up="up"
          :fixed="true"
          :top="280"
          :bottom="70"
        >
          <view class="radio-group">
            <radio-group @change="radioChange">
              <label
                class="radio"
                v-for="(item, index) in items"
                :key="item.value"
              >
                <radio
                  :value="item.value"
                  :checked="index === current"
                  style="transform: scale(0.7)"
                  activeBackgroundColor="red"
                />{{ item.name }}
              </label>
            </radio-group>
          </view>

          <view
            class="box-item"
            v-for="item in list"
            :key="item.keyId"
            :class="{ actived: item.checked }"
          >
            <view class="box-title">
              <view class="box-left">
                <radio-group @click="radioChildChange(item)">
                  <label class="radio">
                    <!-- <radio
                      :checked="item.checked"
                      :value="item.value"
                      style="transform: scale(0.7)"
                      activeBackgroundColor="red"
                    /> -->
                    <image
                      v-if="item.checked"
                      class="selected-item"
                      src="/static/BlockSelected.png"
                      mode="aspectFit"
                    ></image>
                    <image
                      v-else
                      class="selected-item"
                      src="/static/Block.png"
                      mode="aspectFit"
                    ></image>
                    {{ item.loadProvince }} {{ item.loadCity }}⇀
                    {{ item.unloadProvince }} {{ item.unloadCity }}</label
                  >
                </radio-group>
              </view>

              <view class="box-right">{{ item.releaseTimeInterval }}</view>
            </view>
            <view class="box-content" @click="toDetail(item)">
              <view class="logo-qy">
                <image
                  class="logo-icon"
                  :src="
                    item.isCompany == 1
                      ? '/static/qiye.png'
                      : '/static/putong.png'
                  "
                ></image>
              </view>
              <view class="tags">
                <view class="tag">{{ item.vehicleLengthLabel }}</view>
                <view class="tag">{{ item.vehicleTypeLabel }}</view>
                <view class="tag">{{ item.useVehicleModeLabel }}</view>
              </view>
              <view
                class="types"
                style="margin-bottom: 14rpx"
                v-if="item.weight && item.volume"
              >
                <image
                  class="msg-icon"
                  src="/static/huowu-icon.png"
                  mode="scaleToFill"
                />
                <view class="type">{{ item.goodsName }}</view>
                <view class="silver"></view>
                <view class="type">{{ item.goodsPacking }}</view>
                <view class="silver"></view>
                <view class="type">{{ item.weight }}吨</view>
                <view class="silver"></view>
                <view class="type">{{ item.volume }}方</view>
                <view class="silver"></view>
                <view class="type">{{ item.piece }}件</view>
              </view>
              <view
                class="types"
                style="margin-bottom: 14rpx"
                v-if="item.weight && !item.volume"
              >
                <image
                  class="msg-icon"
                  src="/static/huowu-icon.png"
                  mode="scaleToFill"
                />
                <view class="type">{{ item.goodsName }}</view>
                <view class="silver"></view>
                <view class="type">{{ item.goodsPacking }}</view>
                <view class="silver"></view>
                <view class="type">{{ item.weight }}吨</view>
                <view class="silver"></view>
                <view class="type">{{ item.piece }}件</view>
              </view>
              <view
                class="types"
                style="margin-bottom: 14rpx"
                v-if="!item.weight && item.volume"
              >
                <image
                  class="msg-icon"
                  src="/static/huowu-icon.png"
                  mode="scaleToFill"
                />
                <view class="type">{{ item.goodsName }}</view>
                <view class="silver"></view>
                <view class="type">{{ item.goodsPacking }}</view>
                <view class="silver"></view>
                <view class="type">{{ item.volume }}方</view>
                <view class="silver"></view>
                <view class="type">{{ item.piece }}件</view>
              </view>
              <view class="types" v-if="item.serviceRequire">
                <image
                  class="msg-icon"
                  src="/static/info-icon.png"
                  mode="scaleToFill"
                />
                <view class="type">{{ item.serviceRequire }}</view>
              </view>
            </view>
            <view class="box-price"> ¥{{ item.freight }} </view>
          </view>
        </mescroll-uni>
      </view>
      <view v-if="tabIndex === 1" class="tab-bg"> 已接货源 内容 TODO </view>
    </view>

    <view class="fixed-btn" v-if="tabIndex === 0">
      <mix-button
        ref="confirmBtnNG"
        text="批量拒单"
        :isConfirm="false"
        class="btn-default"
        @onConfirm="batchReject"
      ></mix-button>
      <mix-button
        ref="confirmBtnOK"
        text="批量接单"
        :isConfirm="false"
        style="width: 320rpx"
        @onConfirm="batchResolve"
      ></mix-button>
    </view>

    <mix-modal
      ref="mixModal"
      title="提示"
      text="该功能需登录才能使用，是否登录?"
      @onConfirm="login"
    ></mix-modal>

    <search-modal
      ref="searchModal"
      @onConfirm="search"
      :goodsQuality="res0"
      :vehicleLengthQuery="res1"
      :vehicleTypeQuery="res2"
      :dateRang="res3"
      :useVehicleMode="res4"
    ></search-modal>

    <user-confirm
      ref="confirmNgModal"
      title="温馨提示"
      text="确认拒绝当前选择货源吗?"
      @onConfirm="onCancel"
    ></user-confirm>
    <business-modal ref="confirmOKModal" @onConfirm="onSave"></business-modal>
    <company-valid-modal
      ref="vehicleModal"
      @onConfirm="onCompanyValid"
    ></company-valid-modal>
    <user-valid-modal
      ref="driverModal"
      @onConfirm="onUserValid"
    ></user-valid-modal>
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import searchModal from "./components/search-modal.vue";
import businessModal from "./components/business-modal.vue";
import userConfirm from "@/components/user-confirm/user-confirm.vue";
import companyValidModal from "@/components/user-confirm/company-valid-modal.vue";
import userValidModal from "@/components/user-confirm/user-valid-modal.vue";

export default {
  components: {
    searchModal,
    businessModal,
    userConfirm,
    companyValidModal,
    userValidModal,
  },
  mixins: [MescrollMixin],
  data() {
    return {
      title: "货源列表",
      tabIndex: 0,
      items: [
        {
          value: "1",
          name: "当前页全选",
          checked: "true",
        },
        {
          value: "0",
          name: "取消全选",
        },
      ],
      current: 1,
      searchObj: {},
      list: [],
      res0: [],
      res1: [],
      res2: [],
      res3: [],
      res4: [],
      mescroll: null,
      up: {
        auto: false, //默认开始不执行上拉
      },
      down: {
        auto: false, //默认开始不执行下拉
      },
      hasNext: true, //上拉是否有值
    };
  },
  computed: {
    // hasLogin() {
    //   return !!this.$store.getters.hasLogin;
    // },
    ...mapState(["userInfo"]),
    ...mapGetters(["hasLogin"]),
  },
  onLoad() {
    this.getDictionaries();
  },
  onShow() {
    if (!this.list.length) {
      setTimeout(() => {
        this.getList();
      }, 10);
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
      // setTimeout(() => {
      //   this.getList();
      // }, 10);
    },
    refreshChange(data = {}) {
      console.log("refresh");
      this.mescroll.removeEmpty(); //移除空布局，主要是第一次无值，第二次有值
      this.mescroll.showUpScroll(); //显示上拉加载，主要用于标签1加载完END，切换标签2时默认替换END(有切换标签时调用)
      this.current = 1;
      this.list = [];
      this.hasNext = true; //初始化有值
      this.page_no = 1;
      this.getList(data);
    },
    loadChange() {
      console.log("load");
      this.page_no++;
      this.getList();
    },
    async getDictionaries() {
      const res0 = await this.$http.post(`/rest/sys/dictionary/getOptions`, {
        code: "goodsQuality",
      }); // 货源品质
      const res1 = await this.$http.post(`/rest/sys/dictionary/getOptions`, {
        code: "vehicleLengthQuery",
      }); // 车长
      const res2 = await this.$http.post(`/rest/sys/dictionary/getOptions`, {
        code: "vehicleTypeQuery",
      }); // 车型
      const res3 = await this.$http.post(`/rest/sys/dictionary/getOptions`, {
        code: "dateRang",
      }); // 装货时间
      const res4 = await this.$http.post(`/rest/sys/dictionary/getOptions`, {
        code: "useVehicleMode",
      }); // 装货时间
      // console.log("🚀 ~ getDictionaries ~ res0:", res0, res1, res2, res3, res4);
      this.res0 = res0.data;
      this.res1 = res1.data;
      this.res2 = res2.data;
      this.res3 = res3.data;
      this.res4 = res4.data;
    },
    getList(data = {}) {
      if (!this.hasLogin) {
        this.showPopup("mixModal");
        this.mescroll.endUpScroll(false); //隐藏上拉加载，false为隐藏，其他参考文档(有showUpScroll时调用)
        this.mescroll.endDownScroll(); //隐藏下拉刷新
        this.mescroll.showEmpty(); //显示空布局
        return;
      }
      let page_no = this.page_no;
      let params = {
        page: page_no,
        pagesize: 5,
      };
      params = { ...params, ...data, ...this.searchObj };
      // console.log("🚀 ~ getList ~ params:", params);
      this.$http
        .post(
          `/rest/order/deliver/selectWaitOrderPageByStatusForCarrier`,
          params
        )
        .then((res) => {
          let list = [];
          const arr = res.data.map((item) => {
            item.checked = false;
            return item;
          });
          const total = res.total;
          if (data.page_no === 1) {
            list = arr;
          } else {
            list = list.concat(arr);
          }
          this.list = list;
          if (this.list.length >= total) {
            //默认结束
            this.hasNext = false;
          }
          //模拟请求
          if (!this.list.length) {
            //这里是通过list总长度判断的
            this.mescroll.endUpScroll(false); //隐藏上拉加载，false为隐藏，其他参考文档(有showUpScroll时调用)
            this.mescroll.endDownScroll(); //隐藏下拉刷新
            this.mescroll.showEmpty(); //显示空布局
          } else {
            this.mescroll.endSuccess(20, this.hasNext); //数量大于默认数量10，否则无法上拉加载,或者修改endSuccess原方法
          }
        });
    },
    radioChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
      this.list.forEach((item) => (item.checked = this.current === 0));
    },
    radioChildChange: function (item) {
      // item.checked = false
      item.checked = !item.checked;
      // for (let i = 0; i < this.list.length; i++) {
      // 	if (this.list[i].keyId === item.keyId) {
      // 		this.list[i].checked = !this.list[i].checked;
      // 		break;
      // 	}
      // }
    },
    toDetail(item) {
      this.navTo(`/pages/index/detail?id=${item.keyId}`);
    },
    login() {
      this.navTo(`/pages/auth/login`);
    },
    search(searchObj) {
      // console.log("🚀 ~ search ~ searchObj:", searchObj);
      // this.$refs.confirmBtnNG.stop();
      this.page_no = 1;
      this.searchObj = searchObj;
      this.getList();
    },
    batchReject() {
      // 1. 判断用户是否登录
      if (!this.hasLogin) {
        this.showPopup("mixModal");
        return;
      }

      console.log("🚀 ~ batchResolve ~ this.userInfo:", this.userInfo);
      // 2. 判断登录用户是否已认证
      if (this.userInfo.authStatus != 1) {
        //?'已认证'
        this.showPopup("driverModal");
        return;
      }
      // if (this.userInfo.checkStatus != 1 || !this.userInfo.checkStatus) {
      //   //?'已认证'
      //   this.showPopup("vehicleModal");
      //   return;
      // }
      // 3. 判断用户是否已选择记录
      const selectItems = this.list.filter((item) => item.checked);
      if (selectItems.length == 0) {
        this.$util.msg("请至少选择一单");
        return;
      }
      // keyIdList.push({keyId:element.keyId})
      // var para=JSON.stringify(keyIdList);
      // app.requestHttp('rest/tran/waybill/refuseBillForCarrier', para, function (e) {
      this.showPopup("confirmNgModal");
    },
    batchResolve() {
      // 1. 判断用户是否登录
      if (!this.hasLogin) {
        this.showPopup("mixModal");
        return;
      }

      console.log("🚀 ~ batchResolve ~ this.userInfo:", this.userInfo);
      // 2. 判断登录用户是否已认证
      if (this.userInfo.authStatus != 1) {
        this.showPopup("driverModal");
        return;
      }
      // if (this.userInfo.checkStatus != 1 || !this.userInfo.checkStatus) {
      //   this.showPopup("vehicleModal");
      //   return;
      // }
      // 3. 判断用户是否已选择记录
      const selectItems = this.list.filter((item) => item.checked);
      if (selectItems.length == 0) {
        this.$util.msg("请至少选择一单");
        return;
      }
      // 4. 弹出提示信息提示用户
      this.showPopup("confirmOKModal");
    },
    onCancel() {
      const keyIdList = this.list
        .filter((item) => item.checked)
        .map((item) => item.keyId);
      this.$http
        .post(
          `/rest/tran/waybill/refuseBillForCarrier`,
          JSON.stringify(keyIdList)
        )
        .then((res) => {
          if (res.success) {
            this.$util.msg("批量拒单成功");
            setTimeout(() => {
              this.getList();
            }, 2000);
          }
        });
    },
    onSave() {
      const keyIdList = this.list
        .filter((item) => item.checked)
        .map((item) => item.keyId);
      this.$http
        .post(
          `/rest/tran/waybill/receiveBillForCarrier`,
          JSON.stringify(keyIdList)
        )
        .then((res) => {
          if (res.success) {
            this.$util.msg("批量接单成功");
            setTimeout(() => {
              this.getList();
            }, 2000);
          }
        });
    },
    onCompanyValid() {
      this.$util.msg("跳转企业认证");
    },
    onUserValid() {
      this.$util.msg("跳转个人认证");
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: 120rpx;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../static/page_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.checked-all-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 16rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 32rpx;
  color: white;
  display: flex;
  align-items: center;
}
.search-btn {
  position: absolute;
  right: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 32rpx;
  color: white;
  display: flex;
  align-items: center;
}
.page-tip {
  position: absolute;
  left: 54%;
  top: calc(var(--status-bar-height) + 34rpx);
  z-index: 90;
  margin-left: -80rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}
.wrapper {
  margin: calc(var(--status-bar-height) + 0rpx) 20rpx auto 20rpx;
  background: #f7f8f9;
  border-radius: 20px 20px 0px 0px;
  .page-tab {
    display: flex;
    justify-content: space-around;
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(180deg, #f7bebb 0%, #f7f8f9 100%);
    .tab {
      width: 50%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 34rpx;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      top: 0;
      &.actived {
        background: #f7f8f9;
        border-radius: 20px 20px 0px 0px;
        margin-top: -20rpx;
        height: 100rpx;
      }
      .tagActived {
        width: 40rpx;
        height: 4rpx;
        border: 2rpx solid #f75346;
        background: #f75346;
        border-radius: 4rpx;
      }
      .border45 {
        position: absolute;
        right: -24rpx;
        top: 20rpx;
        height: 100rpx;
        width: 110rpx;
        border-radius: 30rpx 0 80rpx 80rpx;
        transform: rotate(60deg);
        background-color: #f7f8f9;
        // border: 1px solid red;
      }
      .border135 {
        position: absolute;
        left: -16rpx;
        top: 12rpx;
        height: 110rpx;
        width: 80rpx;
        border-radius: 30rpx 80rpx 80rpx 0;
        transform: rotate(30deg);
        background-color: #f7f8f9;
        // border: 1px solid red;
      }
    }
  }
  .tab-bg {
    min-height: 80vh;
    background-color: #f7f8f9;
    padding: 20rpx;
  }
}

.radio-group {
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 30rpx 30rpx 20rpx auto;
  color: #222;
  font-size: 28rpx;
}
.checkbox1,
.selected-item {
  width: 30rpx;
  height: 30rpx;
  display: inline-block;
  margin-right: 6rpx;
  vertical-align: middle;
}
.selected-item {
  vertical-align: baseline;
}
.box-item {
  margin: 20rpx 40rpx;
  padding: 10rpx;
  border-radius: 20rpx;
  background-color: white;
  &.actived {
    border: 1px solid red;
  }
  .box-content {
    padding: 20rpx;
    border-radius: 20rpx;
    background-color: #f8f9fd;
  }
}

.box-title {
  display: flex;
  justify-content: space-between;
  margin: 10rpx 10rpx 20rpx 10rpx;
  .box-left {
    font-size: 30rpx;
    font-weight: 600;
    color: #222;
  }
  .box-right {
    font-size: 26rpx;
    color: #1e58ea;
  }
}

.tags {
  display: flex;
  .tag {
    margin: 20rpx 14rpx 20rpx 0;
    padding: 10rpx;
    background: #e8f0f8;
    color: #222;
    border-radius: 6px;
    font-size: 24rpx;
    // font-weight: bold;
  }
}
.types {
  display: flex;
  align-items: center;
  .msg-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 14rpx;
  }
  .type {
    // padding: 10rpx;
    color: #666;
    border-radius: 6px;
    font-size: 28rpx;
    // font-weight: bold;
  }
  .silver {
    margin: 12rpx 12rpx auto 12rpx;
    border: 1rpx solid #999;
    background-color: #999;
    border-radius: 2rpx;
    width: 2rpx;
    height: 16rpx;
  }
}
.logo-qy {
  background: linear-gradient(90deg, #505050 0%, #1f1f1f 100%);
  width: 66rpx;
  height: 34rpx;
  border-radius: 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo-icon {
    width: 50rpx;
    height: 20rpx;
  }
}
.box-price {
  margin: 40rpx auto 20rpx 10rpx;
  font-weight: bold;
  color: red;
  display: flex;
  align-items: center;
}
.fixed-btn {
  position: absolute;
  left: 0;
  bottom: 20rpx;
  z-index: 1;
  width: 100%;
  height: 90rpx;
  font-size: 24rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
.btn-default {
  width: 320rpx;
  background-color: white;
  border: 1px solid #f75248;
  color: #f5473b;
  &:after {
    background: linear-gradient(151deg, white 0%, rgb(240, 236, 236) 100%);
  }
}
</style>
